<template>
  <div class="sugest">
    <h3 @click="$emit(`changekeyword`, keywords)">搜索 “{{ keywords }}”</h3>
    <ul>
      <li v-for="s in sugArray"
        :key="s.id"
        @click="$emit('changekeyword', s.keyword)">
        <i class="fa fa-search" aria-hidden="true"></i>
        <span>{{ s.keyword }}</span>
      </li>
    </ul>
  </div>
</template>
<script>
import _ from 'lodash'
export default {
  props: {
    keywords: String,
  },
  data() {
    return {
      sugArray: [],
      isSearch:false,
    };
  },
  methods: {
    getSearch:_.debounce(function(value){
      this.isSearch=true;
      this.axios.get(`/search/suggest?keywords=${value}&type=mobile`).then(result=>{
        this.isSearch=false;
        if(result.allMatch)this.sugArray=result.allMatch;
      });
    },200)
  },
  mounted(){
    // console.log(this.$route.query);
  },
  created() {
    this.getSearch(this.keywords);
  },
  watch: {
    keywords(newValue) {
      this.getSearch(newValue);
    },
  },
};
</script>
<style scoped lang="less">
.sugest {
  // padding: 10px 10px;
  h3 {
    font-size: 14px;
    color: var(--cy-Color);
  }
  ul {
    padding: 5px;
    li {
      height: 15px;
      border-bottom: 1px solid #ebecec;
      margin: 10px 0;
      padding: 8px 0;
      color: #333;
    }
    i{
        color: rgb(161, 161, 161);
    }
    span{
        margin-left: 10px;
    }
  }
}
</style>